import React, { Component } from 'react';
import styles from './index.less';
import { Descriptions } from 'antd';

class Threeitem extends Component {
  render() {
    const { style, title, data = {} } = this.props;

    return (<div className={styles.threeWrap} style={{ ...style }}>
      <Descriptions column={6} layout="vertical" bordered>
        <Descriptions.Item label=""><span style={{ fontWeight: 'bold' }}>{title.observeNum}</span></Descriptions.Item>
        <Descriptions.Item
          label={title.one}>{data.repay_succ1 === '' ? '无记录' : data.repay_succ1}</Descriptions.Item>
        {data.repay_succ3 ? (<><Descriptions.Item
          label={title.three}>{data.repay_succ3 === '' ? '无记录' : data.repay_succ3}</Descriptions.Item>
        </>) : null}
        {data.repay_succ6 ? (<><Descriptions.Item
          label={title.six}>{data.repay_succ6 === '' ? '无记录' : data.repay_succ6}</Descriptions.Item>
        </>) : null}
        <Descriptions.Item
          label={title.twelve}>{data.repay_succ12 === '' ? '无记录' : data.repay_succ12}</Descriptions.Item>
        {data.repay_succ24 ? (<><Descriptions.Item
          label={title.twentyfour}>{data.repay_succ24 === '' ? '无记录' : data.repay_succ24}</Descriptions.Item>
        </>) : null}
      </Descriptions>
      <br/>
      <Descriptions column={6} layout="vertical" bordered>
        <Descriptions.Item label=""><span style={{ fontWeight: 'bold' }}>{title.unobserveNum}</span></Descriptions.Item>
        <Descriptions.Item
          label={title.one}>{data.repay_fail1 === '' ? '无记录' : data.repay_fail1}</Descriptions.Item>
        {data.repay_fail3 ? (<><Descriptions.Item
          label={title.three}>{data.repay_fail3 === '' ? '无记录' : data.repay_fail3}</Descriptions.Item>
        </>) : null}
        {data.repay_fail6 ? (<><Descriptions.Item
          label={title.six}>{data.repay_fail6 === '' ? '无记录' : data.repay_fail6}</Descriptions.Item>
        </>) : null}
        <Descriptions.Item
          label={title.twelve}>{data.repay_fail12 === '' ? '无记录' : data.repay_fail12}</Descriptions.Item>
        {data.repay_fail24 ? (<><Descriptions.Item
          label={title.twentyfour}>{data.repay_fail24 === '' ? '无记录' : data.repay_fail24}</Descriptions.Item>
        </>) : null}
      </Descriptions>
    </div>)
  }
}

export default Threeitem;
